<!--医疗决策分析-->
<template>
  <div class="decision">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="nav-top" :class="leftAnimate" :style="{width:navWidth+ 'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">医疗支出分析</h2>
        <div class="nav-top-item-box">
          <p class="nav-top-item-container">
            <a class="nav-top-item" :class="classNum==0?'nav-top-item-active':''" @click="goScroll(0)">就诊人员画像</a>
            <a class="nav-top-item" :class="classNum==1?'nav-top-item-active':''" @click="goScroll(1)">病种支出分析</a>
          </p>
        </div>
        <div class="top-operate">
          <span class="three-spot">...</span>
          <i></i>
          <svg class="all-close-btn icon-svg" v-if="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
            <path :d="svgPath.closeFullScreen"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="medical-staff-box">
      <div style="padding-bottom:20px;">
        <MedicalStaffDis v-if="!isGoOther" :isChange="isChange"  :fullScreen="fullScreen" :isCollapse="isCollapse"></MedicalStaffDis>
      </div>
    </div>
    <div class="chart-item new-chart-container" v-if="num>0 && !isGoOther" :style="{height:height*4+15-height/2+'px'}"
         id="all-chart-content-id">
      <div class="chart-item new-chart-item" :style="{height:height+50+'px'}">
        <!--因为filter是异步请求的来的，所以只有获取到其值后才可以进行dom渲染-->
        <disease-type-cost-analyse :isChange="isChange" :fullScreen="fullScreen" :isCollapse="isCollapse"
                                   :height="height"></disease-type-cost-analyse>
      </div>
      <div class="chart-item new-chart-item" :style="{height:height+'px'}">
        <ScopeOfDrugUse :isChange="isChange" :fullScreen="fullScreen" :isCollapse="isCollapse"
                        :height="height"></ScopeOfDrugUse>
      </div>
      <div class="chart-item new-chart-item" :style="{height:height+'px'}">
        <DiseaseSpeciesDistribution :isChange="isChange" :fullScreen="fullScreen" :isCollapse="isCollapse"
                                    :height="height"></DiseaseSpeciesDistribution>
      </div>
      <div class="chart-item new-chart-item" :style="{height:height*0.8+'px'}" id="base-on-disease-analyse-id">
        <disease-type-avg-in-hos-day-analyse :isChange="isChange" :fullScreen="fullScreen" :isCollapse="isCollapse">
        </disease-type-avg-in-hos-day-analyse>
      </div>
    </div>
  </div>
</template>
<script>
  import {svgPath, quitFullScreen} from "../../assets/js/utils";
  import {getSearchItems} from '../../api/api'
  import MedicalStaffDis from './medical-component/medical-staff-distribution'
  import ScopeOfDrugUse from './medical-component/scope-of-drug-use'
  import DiseaseSpeciesDistribution from './medical-component/disease-species-distribution'
  import DiseaseTypeCostAnalyse from './medical-component/disease-type-cost-analyse.vue'
  import DiseaseTypeAvgInHosDayAnalyse from './medical-component/disease-type-avg-in-hos-day-analyse.vue'
  export default {
    props: ['isChange', 'fullScreen', 'isCollapse','pageChange'],
    data() {
      return {
        isGoOther:false,
        canShow: true,
        leftAnimate: '',
        svgPath: svgPath,
        filter: null,
        width: 0,
        isShow: true,
        left: 80,
        top: 70,
        height: 500,
        navWidth: 800,
        chartHeight: 445,
        num: 0,
        nextNum: 0,
        classNum: 0,
        canChangeStyle: false
      }
    },
    components: {
      MedicalStaffDis,
      ScopeOfDrugUse,
      DiseaseSpeciesDistribution,
      DiseaseTypeCostAnalyse,
      DiseaseTypeAvgInHosDayAnalyse
    },
    activated(){
      if (sessionStorage.getItem('isPrev')) {
        let num = Number(sessionStorage.getItem('isPrev'))
        this.goScroll(num, 0.01)
        sessionStorage.removeItem('isPrev')
      }
      let that = this;
      let val = this.height;
      document.querySelector('.el-main').onscroll = function (e) {
        e = e || window.event;
        let scrollTop = e.target.scrollTop;
        if ((scrollTop - 5) / val + 1 - that.num > 0.01) {
          that.num = parseInt(scrollTop / val) + 1;
        }
        if (scrollTop == 0) {
          that.classNum = 0
        } else {
          if (!that.canChangeStyle) {
            that.classNum = parseInt((scrollTop - 11) / val) + 1 >= 1 ? 1 : parseInt((scrollTop - 11) / val) + 1
          }
        }
      }
    },
    watch: {
      isCollapse(val){
        let bodyWidth = document.querySelector('body').clientWidth;
        if (!val) {
          this.navWidth = bodyWidth - 200;
          this.leftAnimate = 'open-left-menu'
        } else {
          this.navWidth = bodyWidth - 44;
          this.leftAnimate = 'close-left-menu'
        }
      },
      isChange(){
        setTimeout(() => {
          this.getChartItem();
        }, 100)
      },
      height(val){
        let that = this;
        document.querySelector('.el-main').onscroll = function (e) {
          e = e || window.event;
          let scrollTop = e.target.scrollTop;
          if (that.num < (scrollTop - 5) / val + 1) {
            if ((scrollTop - 5) / val > 0 && (scrollTop - 5) / val < 0.4) {
              that.num = 1;
            } else {
              that.num = 2;
            }
          }
          if (scrollTop == 0) {
            that.classNum = 0
          } else {
            if (!that.canChangeStyle) {
              that.classNum = parseInt((scrollTop - 11) / val) + 1 >= 1 ? 1 : parseInt((scrollTop - 11) / val) + 1
            }
          }
        }
      },
      pageChange(){
        this.isGoOther = true;
        this.isGoOther = false;
        this.nextNum = 0;
        this.classNum = 0;
        document.querySelector('.el-main').scrollTop = 0 + 'px';
      }
    },
    mounted() {
      this.getChartItem();
      setTimeout(() => {
        this.isShow = true;//因为图表的高度是动态获取的，一开始并没有高度值，无高度值时不能渲染图表，故要等高度赋值后才渲染图表。
      }, 1)
    },
    methods: {
      closeAll(){
        quitFullScreen();
      },
      //动态设置宽高
      getChartItem(){
        // if(!document.documentElement){
        //   return;
        // }
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          this.canShow = true;
          barHeight = document.querySelector('.el-header').clientHeight;
          if (document.querySelector('.el-aside')) {
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          this.canShow = false;
          barHeight = 0;
          sideWidth = 0;
          top = 0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight - 54;
        //每一个图表块的宽度
        let width = 1000;
        if (document.querySelector('.chart-box')) {
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
      },
      //点击面包屑效果
      goScroll(num, timeVal){
        timeVal = timeVal || 100;
        this.canChangeStyle = true;
        this.classNum = num;
        if (this.num < num) {
          this.num = num;
        }
        let scrollTop = document.querySelector('.el-main').scrollTop;
        let realNum = num;
        let goTop = this.height * realNum;
        let height = Math.abs(goTop - scrollTop) + 15;
        let spit = height / 1000;
        let time = 0;
        let timer = setInterval(() => {
          time += 100;
          if (time <= 1000) {
            if (scrollTop < goTop) {
              document.querySelector('.el-main').scrollTop = scrollTop + spit * time;
            } else {
              document.querySelector('.el-main').scrollTop = scrollTop - spit * time;
            }
          } else {
            this.canChangeStyle = false;
            clearInterval(timer)
          }
        }, timeVal)
      },
    },
    beforeRouteEnter(to,from,next){
      next()
    },
    beforeRouteLeave (to, from, next) {
      if(to.name=='detail'){
        this.isGoOther = false;
      }else{
        this.isGoOther = true;
        this.num = 0;
      }
      next()
    },
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';

  .new-chart-container {
    padding: 0 12px 15px 12px;
    box-sizing: border-box;
    width: 100%;
  }

  .new-chart-item {
    width: 100%;
    background: #1b2b44;
    box-sizing: border-box;
    border-bottom: solid 1px #1d2027;
    padding: 0;
  }
</style>
